<script lang="ts" setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { useSystemStore } from '~/stores/system'
const store = useSystemStore()
const emit = defineEmits(['ok'])
const clicked = ref(false)
const confirm = () => {
  emit('ok')
}
const onCancel = () => {
  clicked.value = true
}
</script>

<template>
  <el-popconfirm width="220" :icon="InfoFilled" :icon-color="store.color" :title="$t('confirm_operation')"
    @cancel="onCancel">
    <template #reference>
      <slot></slot>
    </template>
    <template #actions="{ cancel }">
      <div class="flex justify-end dialog-footer">
        <Button class="mr-2" :fill="true" @click="cancel">{{$t('cancel')}}</Button>
        <Button :fill="true" @click="confirm">{{$t('confirm')}}</Button>
      </div>
    </template>
  </el-popconfirm>
</template>